<template>
    <div class="app-container">
        <table-toolbar :tools="tools" :showSearch="true" :searchPlaceholder="'文章标题'" @tool-click="toolbarClick" @on-search="onSearchClick"></table-toolbar>
        <el-table
                ref="schemeListTable"
                v-loading.body="loading"
                element-loading-text="拼命加载中"
                :data="schemeList"
                @sort-change="sortChangeHandle"
                @selection-change="handleSelectionChange"
                border
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题">
            </el-table-column>
            <el-table-column
                    prop="intro"
                    label="简介">
            </el-table-column>
            <el-table-column
                    sortable="custom"
                    prop="created_at"
                    label="创建时间"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    sortable="custom"
                    prop="status"
                    label="状态"
                    show-overflow-tooltip>
                <template scope="scope">
                    <el-tag v-if="scope.row.status === 1" type="success">已发布</el-tag>
                    <el-tag v-if="scope.row.status === 0" type="gray">未发布</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button type="primary" icon="edit" size="small" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button type="warning" icon="delete" size="small" @click="deleteNews(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <table-pagination :dataTotal="dataTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange"></table-pagination>
    </div>
</template>
<script>
  import schemeApi from '../../../api/scheme'
  import { Message } from 'element-ui'
  import TableToolbar from '@/components/TableToolbar'
  import TablePagination from '@/components/TablePagination'
  import { getSortAndOrder } from '../../../utils/common'
  import _ from 'lodash'
  export default {
    components: {
      TableToolbar,
      TablePagination
    },
    data () {
      return {
        schemeList: [],
        multipleSelection: [],
        tools: [
          {
            'btn-type': 'primary',
            'btn-name': '添加',
            key: 'add',
            icon: 'plus'
          },
          {
            'btn-type': 'primary',
            'btn-name': '删除',
            key: 'delete',
            icon: 'delete'
          }
        ],
        dataTotal: 0,
        loading: true,
        searchParams: {
          limit: 10,
          page: 1,
          search: false,
          order: false,
          sort: false,
          type: 0
        }
      }
    },
    created () {
      const self = this
      switch (this.$route.name) {
        case 'CaseManagerIndex':
          self.searchParams.type = 1
          break
        case 'SolutionManagerIndex':
          self.searchParams.type = 0
          break
      }
      this.getSchemeList(this)
    },
    methods: {
      getSchemeList: _.debounce((self) => {
        self.loading = true
        schemeApi.getSchemeList(self.searchParams).then(response => {
          self.schemeList = response.data.data
          self.dataTotal = response.data.meta.pagination.total
          self.loading = false
        }, response => {
          Message.error(response.data.message)
        })
      }, 500),
      toolbarClick (tool) {
        switch (tool.key) {
          case 'add':
            if (this.searchParams.type === 0) {
              this.$router.push({name: 'SolutionManagerAdd'})
            } else if (this.searchParams.type === 1) {
              this.$router.push({name: 'CaseManagerAdd'})
            }
            break
          case 'delete':
            this.deleteMultipleSelection()
            break
        }
      },
      onSearchClick (keyword) {
        if (this.searchParams.search === keyword) {
          return false
        }
        this.searchParams.search = keyword
        this.getSchemeList(this)
      },
      handleSizeChange (size) {
        this.searchParams.limit = size
      },
      handleCurrentChange (page) {
        this.searchParams.page = page
      },
      sortChangeHandle (column) {
        const data = getSortAndOrder(column)
        if (data) {
          this.searchParams.order = data.order
          this.searchParams.sort = data.sort
          this.getSchemeList(this)
        }
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      edit (id) {
        this.$router.push({name: 'NewsManagerEdit', params: {id: id}})
      },
      deleteMultipleSelection () {
        const ids = _.map(this.multipleSelection, 'id').join(',')
        this.deleteScheme(ids)
      },
      deleteScheme (ids) {
        const self = this
        if (!ids) {
          self.$message.warning('请选择需要删除的数据')
          return false
        }
        self.$confirm('此操作将要删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          schemeApi.deleteScheme(ids).then(() => {
            self.$message.success('删除成功')
            self.getSchemeList(self)
          }, response => {
            self.$message.error(response.data.error)
          })
        })
      }
    },
    watch: {
      'searchParams.page' () {
        this.getSchemeList(this)
      },
      'searchParams.limit' () {
        this.getSchemeList(this)
      }
    }
  }
</script>
<style>

</style>
